<template>
  <!-- 新增设备型号 表单 -->
  <a-modal
    v-model:open="visible"
    :title="isEdit ? '编辑设备型号' : '新增设备型号'"
    @ok="handleOk"
    class="addStation"
    :width="800"
    @cancel="cancel"
    centered
  >
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
    >
      <a-form-item label="设备型号：" name="name">
        <a-input
          ref="select"
          v-model:value="form.name"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="厂商简称：" name="supplierId">
        <a-select
          ref="select"
          v-model:value="form.supplierId"
          class="formSelect"
          placeholder="请选择"
          @change="changeSupplierType"
        >
          <a-select-option
            v-for="item in supplierList"
            :value="item.supplierId"
            :key="item.supplierId"
          >
            {{ item.supplierShortName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="协议型号：" name="supplierTypeId">
        <a-select
          v-model:value="form.supplierTypeId"
          class="formInput"
          placeholder="请选择"
          :disabled="!form.supplierId"
          allow-clear
          :loading="formLoading"
        >
          <a-select-option
            v-for="item in supplierTypeList"
            :value="item.id"
            :key="item.id"
          >
            {{ item.type }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="设备生产厂家：" name="equipmentManufacturer">
        <a-select
          ref="select"
          v-model:value="form.equipmentManufacturer"
          class="formSelect"
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in manufactorList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="单柜容量(kWh)：" name="singleCapacity">
        <a-input-number
          v-model:value="form.singleCapacity"
          :controls="false"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="单柜额定功率(kW)：" name="singleRatedPower">
        <a-input-number
          v-model:value="form.singleRatedPower"
          :controls="false"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="PACK数量：" name="packNumberPerCluster">
        <a-input-number
          v-model:value="form.packNumberPerCluster"
          :controls="false"
          class="formInput"
          placeholder="请输入"
        >
          <template #addonAfter> 个/电池簇 </template>
        </a-input-number>
      </a-form-item>
      <a-form-item label="电芯数量：" name="cellNumberPerPack">
        <a-input-number
          v-model:value="form.cellNumberPerPack"
          :controls="false"
          class="formInput"
          placeholder="请输入"
        >
          <template #addonAfter> 个/PACK </template>
        </a-input-number>
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import { BUSINESS_TYPE_LIST } from "@/constants/stationConfig";
const $api = inject("$api");
const props = defineProps({
  addModelVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
});
const visible = ref(props.addModelVisible);
//获取生产厂家类别
const manufactorList = ref([]);
const getManufactorTypeList = async () => {
  const res = await $api.equipmentManufacturer();
  if (res && res.code === 0) {
    manufactorList.value = Object.entries(res.data).map(([key, value]) => ({
      value: Number(key), // 将key转换为数字类型
      label: value,
    }));
  }
};
const emits = defineEmits(["update:addModelVisible", "getEquipModelPage"]);
watch(
  () => props.addModelVisible,
  async (val) => {
    visible.value = val;
    if (val) {
      await getManufactorTypeList();
      await getSupplierPage();
      if (props.isEdit) {
        form.value = {
          ...props.rowData,
        };
        handleSupplierTypeList(props.rowData.supplierId)
      }
    }
  }
);
const labelCol = { style: { width: "140px" } };
const formRef = ref(null);
const loading = ref(false);
const form = ref({
  name: undefined,
  supplierTypeId: undefined,
  supplierId: undefined,
  singleCapacity: undefined,
  singleRatedPower: undefined,
  packNumberPerCluster: undefined,
  cellNumberPerPack: undefined,
});
const rules = ref({
  name: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
  supplierTypeId: [{ required: true, message: "请选择协议型号", trigger: "change" }],
  supplierId: [{ required: true, message: "请选择厂商", trigger: "change" }],
  singleCapacity: [
    { required: true, message: "请输入单柜容量", trigger: "blur" },
  ],
  singleRatedPower: [
    { required: true, message: "请输入单柜额定功率", trigger: "blur" },
  ],
  packNumberPerCluster: [
    { required: true, message: "请输入PACK数量", trigger: "blur" },
  ],
  cellNumberPerPack: [
    { required: true, message: "请输入电芯数量", trigger: "blur" },
  ],
  equipmentManufacturer: [
    { required: true, message: "请选择设备生产厂家", trigger: "change" },
  ],
});
const cancel = () => {
  emits("update:addModelVisible", false);
  form.value = {
    name: undefined,
    supplierTypeId: undefined,
    supplierId: undefined,
    singleCapacity: undefined,
    singleRatedPower: undefined,
    packNumberPerCluster: undefined,
    cellNumberPerPack: undefined,
  };
  formRef.value.clearValidate();
};
const supplierList = ref([]);
const getSupplierPage = async () => {
  const res = await $api.supplierList();
  supplierList.value = res.data;
};
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = {
        ...form.value,
      };
      if (props.isEdit) {
        // 编辑带上id
        params.id = props.rowData.id;
      }
      loading.value = true;
      // 新增是 $api.addEquipModelPage ，编辑是 $api.editEquipModelPage
      const res = await $api[props.isEdit ? "editEquipModelPage" : "addEquipModelPage"](
        params,
      );
      loading.value = false;
      if (res.code === 0) {
        message.success(props.isEdit ? "编辑成功" : "新增成功");

        cancel();
        emits("getEquipModelPage");
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const supplierTypeList = ref([])
const handleSupplierTypeList = (id) => {
  supplierTypeList.value =
    supplierList.value.filter((item) => item.supplierId === id)[0]
      ?.supplierTypeEntities || []        
}
const changeSupplierType = (id) => {
  form.value.supplierTypeId = null
  handleSupplierTypeList(id)
}
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 220px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
</style>
